@mixin tag-input-theme($theme) {
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;

    transition: map-get($theme, transition);

    padding: map-get($theme, 'container-padding');
    min-height: map-get($theme, 'container-height');

    cursor: text;

    border-bottom: map-get($theme, 'container-border-bottom');
    box-shadow: map-get($theme, 'box-shadow');
    border-radius: map-get($theme, 'border-radius');

    &:focus {
        outline: 0;
    }

    &.ng2-tag-input--dropping {
        opacity: 0.7;
    }

    &.ng2-tag-input--focused {
        border-bottom: map-get($theme, 'container-border-bottom-focused');
    }

    &.ng2-tag-input--invalid {
        border-bottom: map-get($theme, 'container-border-bottom-invalid');
    }

    &.ng2-tag-input--loading {
        border: none;
    }

    &.ng2-tag-input--disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    form {
        margin: map-get($theme, 'container-margin');
    }

    .ng2-tags-container {
        flex-wrap: wrap;
        display: flex;
    }
}

@mixin error-message($theme) {
    font-size: map-get($theme, 'error-message-font-size');
    color: map-get($theme, 'error-message-color');
    margin: map-get($theme, 'error-message-margin');
}

@mixin tag-theme($theme) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    font-family: map-get($theme, 'font-family');
    font-weight: map-get($theme, 'font-weight');
    font-size: map-get($theme, 'font-size');
    letter-spacing: map-get($theme, 'letter-spacing');

    color: map-get($theme, 'color');
    border-radius: map-get($theme, 'border-radius');

    transition: map-get($theme, 'transition');

    margin: map-get($theme, 'margin');
    padding: map-get($theme, 'padding');

    height: map-get($theme, 'height');
    line-height: map-get($theme, 'line-height');

    background: map-get($theme, 'background');

    user-select: none;
    overflow: hidden;
    outline: 0;
    cursor: pointer;
    position: relative;

    &:not(.readonly):not(.tag--editing):focus {
        background: map-get($theme, 'background-focused');
        color: map-get($theme, 'color-focused');
        box-shadow: map-get($theme, 'box-shadow');
    }

    &:not(.readonly):not(.tag--editing):active {
        background: map-get($theme, 'background-active');
        color: map-get($theme, 'color-active');
        box-shadow: map-get($theme, 'box-shadow');
    }

    &:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover {
        background: map-get($theme, 'background-hover');
        color: map-get($theme, 'color-hover');
        box-shadow: map-get($theme, 'box-shadow');
    }

    &.readonly {
        cursor: default;
    }

    &.readonly:focus,
    &:focus {
        outline: 0;
    }

    &.tag--editing {
        background-color: map-get($theme, 'background-editing');
        border: map-get($theme, 'border-editing');
        cursor: text;
    }
}

@mixin tag-input-form-theme($theme) {
    display: inline;
    vertical-align: middle;

    border: map-get($theme, 'input-border');
    padding: map-get($theme, 'input-padding');
    height: map-get($theme, 'input-height');

    font-size: map-get($theme, 'input-font-size');
    font-family: map-get($theme, 'font-family');

    &:focus {
        outline: 0;
    }

    &[disabled=true] {
        opacity: 0.5;
        background: #fff;
    }
}

@mixin icon-theme($theme) {
    width: map-get($theme, 'width');
    height: map-get($theme, 'height');
    transition: map-get($theme, 'transition');
    display: map-get($theme, 'display');
    text-align: right;

    path {
        fill: map-get($theme, 'fill');
    }

    svg {
        vertical-align: bottom;
        height: 34px;
    }
}

@mixin icon-theme-focused($theme) {
    path {
        fill: map-get($theme, 'fill-focus');
    }
}
